<template>
  <view class="statistic">
    <u-toast ref="uToast"></u-toast>
    <u-no-network></u-no-network>
    <u-navbar title="激活统计">
      <view class="" slot="right" @click="goActiveStateList()"> 统计 </view>
    </u-navbar>

    <view class="statistic__card">
      <u-cell-item
        @click="goMyDetail()"
        :title-style="{ color: '#333333' }"
        title="我的激活统计"
        :border-bottom="false"
        class="terminal__sub"
      >
        <image
          class="icon mr-20"
          slot="icon"
          src="@/static/image/home/icon_line_vertical.png"
        />
      </u-cell-item>
      <view class="flex justify-between">
        <view class="statistic__item">
          <view class="bold">
            {{ merchantData.myMerchantActivityNum }}
          </view>
          <view class="tip"> 激活用户 </view>
        </view>
        <view class="statistic__item">
          <view class="bold">
            {{ merchantData.myMerchantRegistrationsNum }}
          </view>
          <view class="tip"> 拓展用户 </view>
        </view>
      </view>
    </view>
    <view class="statistic__card">
      <u-cell-item
        @click="goAgentDetail()"
        :title-style="{ color: '#333333' }"
        title="代理的激活统计"
        :border-bottom="false"
        class="terminal__sub"
      >
        <image
          class="icon mr-20"
          slot="icon"
          src="@/static/image/home/icon_line_vertical.png"
        />
      </u-cell-item>
      <view class="flex justify-between">
        <view class="statistic__item">
          <view class="bold">
            {{ merchantData.agentMerchantActivityNum }}
          </view>
          <view class="tip"> 激活用户 </view>
        </view>
        <view class="statistic__item">
          <view class="bold">
            {{ merchantData.agentMerchantRegistrationsNum }}
          </view>
          <view class="tip"> 注册用户 </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      merchantData: {},
    };
  },

  mounted() {
    this.getTotalAccount();
  },
  methods: {
    getTotalAccount() {
      this.$zx.terminal_api.totalCount().then((data) => {
        console.log('totalCount------->', data);
        this.merchantData = data;
      });
    },
    goMyDetail() {
      this.$u.route('pages/main/terminal/statisticDetail', {
        showTab: '0',
      });
    },
    goAgentDetail() {
      this.$u.route('pages/main/terminal/statisticDetail', {
        showTab: '1',
      });
    },
    goActiveStateList() {
      this.$u.route('pages/main/terminal/terminalActiveStateList');
    },
  },
};
</script>

<style scoped lang="scss">
.statistic {
  width: 100vw;
  height: 100vh;
  position: relative;
  padding: 10rpx;

  &__card {
    // border-radius: 10rpx;
    background-color: white;
    padding-bottom: 30rpx;
    margin: 20rpx;
  }

  &__item {
    display: flex;
    flex-direction: column;
    // width: 334rpx;
    flex: 1;
    margin: 0 30rpx;
    height: 236rpx;
    border: 1rpx solid #999;
    border-radius: 10rpx;
    text-align: center;
    justify-content: center;
  }
}

.bold {
  font-size: 22px;
  font-weight: bold;
}

.tip {
  font-size: 12px;
  margin-top: 10rpx;
}

.icon {
  width: 13rpx;
  height: 36rpx;
}
</style>
